import * as echarts from "echarts";
export function initColumnChart(
  chartData,
  chartId,
  rotateNum,
  gradientColor,
  yAxisNameParams,
  labelShowParams,
  barWidthParams,
  barBorderRadiusParams,
  yAxisSecShowParams,
  yAxisSecNameParams,
  yAxisMinParams,
  yAxisMaxParams,
  gridParams
) {
  console.log(chartData, chartId);
  let series = [];

  let color = "#0197fe";
  if (gradientColor) {
    color = gradientColor;
  }

  /* 重新定义是否显示柱体上方的文字 */
  let labelShow = false;
  if (labelShowParams) {
    labelShow = labelShowParams;
  }

  let barWidth = 20;
  if (barWidthParams) {
    barWidth = 20;
  }

  let barBorderRadius = [0];
  if (barBorderRadiusParams) {
    barBorderRadius = barBorderRadiusParams;
  }

  /* 重新定义y轴的最小值 最大值 */
  let yAxisMin = undefined;
  if (yAxisMinParams) {
    yAxisMin = yAxisMinParams;
  }

  let yAxisMax = undefined;
  if (yAxisMaxParams) {
    yAxisMax = yAxisMaxParams;
  }

  series.push({
    type: "bar",
    barWidth: barWidth,
    color: color,
    data: chartData.series,
    name: chartData.nameList[0],
    itemStyle: {
      normal: {
        //柱形图圆角，初始化效果
      },
    },
    label: {
      show: labelShow,
      position: "top",
      fontSize: 15,
      color: "#fff",
    },
  });

  /* 重新定义y轴的文字 */
  let yAxisName = "";
  if (yAxisNameParams) {
    yAxisName = yAxisNameParams;
  }

  let yAxisSecShow = false;
  if (yAxisSecShowParams) {
    yAxisSecShow = yAxisSecShowParams;
  }

  let yAxisSecName = "";
  if (yAxisSecNameParams) {
    yAxisSecName = yAxisSecNameParams;
  }

  let grid = {
    top: "15%",
    left: "5%",
    right: "5%",
    bottom: "5%",
    containLabel: true,
  };
  if (gridParams) {
    grid = gridParams;
  }

  var option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      // backgroundColor: "rgba(4,15,46,0.8)", //设置背景图片 rgba格式
      color: "black",
      borderWidth: 1, //边框宽度设置1
      // borderColor: "#153170", //设置边框颜色
      textStyle: {
        fontSize: 12,
        // color: "#fff", //设置文字颜色
      },
    },
    grid: grid,
    xAxis: {
      type: "category",
      boundaryGap: true,
      data: chartData.categories,
      splitLine: {
        // 分割线
        show: false, // 控制分割线是否显示
        lineStyle: {
          // 分割线的样式
          color: "#295C89",
          width: 1,
          type: "solid",
        },
      },

      axisLabel: {
        // color: "#fff", // 坐标轴的文本颜色
        fontSize: 15,
        margin: 20,
        rotate: rotateNum,
      },
    },
    yAxis: [
      {
        type: "value",
        name: yAxisName,
        nameTextStyle: {
          fontSize: 20,
          fontWeight: 600,
          // color: "#fff",
        },
        nameGap: 0,
        splitLine: {
          // 分割线
          show: true, // 控制分割线是否显示
          lineStyle: {
            // 分割线的样式
            color: "#295C89",
            // width: 25,
            // type: "dashed",
          },
        },
        axisLabel: {
          // color: "#fff", // 坐标轴的文本颜色
          fontSize: 20,
          margin: 20,
        },
        min: yAxisMin,
        max: yAxisMax,
        axisLine: {
          // y轴不显示
          show: true,
          lineStyle: {
            // 分割线的样式
            color: "#295C89",
            width: 1,
            // type: "dashed",
          },
        },
        axisTick: {
          // y轴刻度线不显示
          show: true,
        },
      },
      {
        show: yAxisSecShow,
        type: "value",
        min: 0,
        max: 25,
        name: yAxisSecName,
        interval: 5,
        // axisLabel: {
        //   formatter: '{value} %'
        // },
        nameTextStyle: {
          fontSize: 25,
          fontWeight: 600,
          color: "#fff",
        },
        nameGap: 0,
        splitLine: {
          // 分割线
          show: true, // 控制分割线是否显示
          lineStyle: {
            // 分割线的样式
            color: "#295C89",
            width: 20,
            type: "dashed",
          },
        },
        axisLabel: {
          color: "#fff", // 坐标轴的文本颜色
          fontSize: 20,
          margin: 0,
        },
        axisLine: {
          // y轴不显示
          show: true,
          lineStyle: {
            // 分割线的样式
            color: "#295C89",
            width: 2,
            type: "dashed",
          },
        },
        axisTick: {
          // y轴刻度线不显示
          show: true,
        },
      },
    ],
    legend: {
      data: chartData.nameList,
      icon: "rect",
      top: 20, //调整位置
      itemWidth: 20, //标志图形的长度
      itemHeight: 20,
      bottom: 2,
      right: "15%",
      textStyle: {
        // 标题样式
        fontSize: 12,
        // fontFamily: "FZLTZCHK--GBK1-0",
        // color: "1",
      },
    },

    series: series,
  };

  echarts.init(document.getElementById(chartId)).dispose();
  let myChart = echarts.init(document.getElementById(chartId));
  myChart.setOption(option, true); //每刷新一次重新显示图表

  return myChart;
}
